<!--
  表格数据行
  @author 邵鹏坤 2022年9月22日
-->
<template>
  <tr :class="[un.e(), un.is('highlight', _highlight), un.is('stripe', _stripe && _index % 2 === 0)]">
    <td
      v-for="(item, index) in _columns"
      :class="[
        unTd.e(),
        un.is('first-td', _needIndex ? index == 0 : index == 1),
        un.is('highlight', _highlight),
        unTd.is('border', _border),
        un.p(_direction)
      ]"
      :key="item.field"
      :style="{
        width: item.width && item.width > 0 ? item.width + 'px' : '',
        'flex-grow': !item.width ? 1 : 'unset'
      }"
      v-show="item.field === 'index' ? _needIndex : true"
    >
      {{ item.field === 'index' ? _index + 1 : rowData[item.field] }}
    </td>
  </tr>
</template>

<script setup lang="ts">
  import useNamespace from '@/hooks/use-namespace'
  import useProp from '@/hooks/use-prop'
  defineProps<{
    index: number
    needIndex?: boolean
    rowData: any
  }>()
  const un = useNamespace('table-row')
  const unTd = useNamespace('table-row-td')
  const _stripe = useProp('stripe')
  const _direction = useProp('direction')
  const _border = useProp('border')
  const _columns = useProp('columns')
  const _highlight = useProp('highlight')
  const _index = useProp('index')
  const _needIndex = useProp('needIndex')
</script>

<style lang="scss" scoped>
  @import '../css/index.scss';
</style>
